<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :backIconColor="'#333'" :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				充值审核
			</text>
		</base-nav-bar>
		<view class="merchant-title u-flex u-flex-between u-flex-items-start u-p-20 u-m-l-40 u-m-r-40">
			<view class="merchant-main-title u-m-b-10">
				<view class="u-font-28">目前总积分:{{scoreAll?scoreAll:0}}</view>
			</view>
			<view class="merchant-sub-title u-flex u-flex-end u-flex-items-center u-col-center u-m-b-10" @click="jump('/pages-merchant/wallet/rechargeHistory')">
				<view class="u-font-28 u-m-r-10">充值历史</view>
				<view class="merchant-sub-title-btn"><u-icon name="arrow-right" size="14" :color="'#30AA4D'"></u-icon></view>
			</view>
		</view>
		<view class="content-box u-p-20 u-m-t-80 u-m-l-40 u-m-r-40">
			<!-- grid商家功能模块 -->
			<view class="u-flex u-flex-items-center u-flex-start u-flex-wrap">
				<u--form :model="form" ref="uForm" :labelPosition="'top'" style="width: 100%;" :labelStyle="{'margin-botttom':'10rpx'}">
					<u-form-item label="手机号" prop="phone" labelWidth="120">
						<u-input v-model="form.phone" placeholder="请输入手机号" @blur="getScore()"/>
					</u-form-item>
					<u-form-item label="固定积分" prop="score" labelWidth="120">
						<u-input v-model="form.fixed_score" placeholder="请输入需要固定积分数量"/>
					</u-form-item>
					<u-form-item label="自由积分" prop="fixed_score" labelWidth="120">
						<u-input v-model="form.score" placeholder="请输入自由积分数量"/>
					</u-form-item>
					<u-form-item label="请上传支付凭证" prop="name" labelWidth="120">
						<u-upload
							:fileList="rechargeImages"
							@afterRead="afterRead"
							@delete="deletePic"
							name="Images"
							multiple
							:maxCount="2"
							:previewFullImage="true"
						></u-upload>
					</u-form-item>
					<u-form-item label="充值类型" labelWidth="120"
					             prop="chongType"
					             ref="chongType"
					             @click="openChongType()">
						<u-input
							v-model="form.chongName"
							placeholder="选择充值类型"
							suffixIcon="arrow-right"
							suffixIconStyle="color: #909399"
							readonly
						></u-input>
					</u-form-item>
					<u-form-item label="充值月份" labelWidth="120"
					             prop="yueType"
					             ref="yueType"
					             v-if="form.chongName == '月卡充值'"
					             @click="openYueType()">
						<u-input
							v-model="form.card_day"
							placeholder="选择充值月份"
							suffixIcon="arrow-right"
							suffixIconStyle="color: #909399"
							readonly
						></u-input>
					</u-form-item>
					<u-form-item label="选择月卡课程" labelWidth="120"
					             prop="yueka"
					             ref="item2"
					             v-if="form.chongName == '月卡充值'"
					             @click="openClass()">
						<u-input
							v-model="form.course_name"
							placeholder="选择月卡课程"
							suffixIcon="arrow-right"
							suffixIconStyle="color: #909399"
							readonly
						></u-input>
					</u-form-item>
					<u-form-item label="月卡有效期" labelWidth="120"
					             prop="youxiaoqi"
					             ref="youxiaoqi"
                       v-if="form.chongName == '月卡充值'">
<!--						<u-input-->
<!--							v-model="form.youxiao_time_name"-->
<!--							placeholder="选择月卡有效期"-->
<!--							suffixIcon="arrow-right"-->
<!--							suffixIconStyle="color: #909399"-->
<!--							readonly-->
<!--						></u-input>-->
<!--						<uni-datetime-picker-->
<!--							v-model="form.youxiao_time"-->
<!--							type="daterange"-->
<!--							rangeSeparator="至"-->
<!--							@close="chooseYouxiao"-->
<!--						/>-->
            <view :style="{'background':'#fff','border-radius': '6px','border': '1px solid','border-color':'#ccc!important'}" class="u-flex u-flex-between u-flex-items-center u-p-l-10 u-p-r-10">
              <u-icon :color="'#000'" :size="16" name="clock"></u-icon>
              <view @click="openBeginTime()">
                <u-input v-model="form.str_time" :border="false" inputAlign="center" placeholder="开始时间" readonly/>
              </view>
              <view style="width: 2%; height: 4rpx;background: #000;"></view>
              <view @click="openEndTime()">
                <u-input v-model="form.end_time" :border="false" inputAlign="center" placeholder="结束时间" readonly/>
              </view>
            </view>
					</u-form-item>
				</u--form>
				<view class="submit-btn" @click="submit">提交</view>
			</view>
		</view>
		<u-picker :show="chongClosable" :columns="chongTypeList" :title="'选择充值类型'"  key-name="name" @confirm="chooseChong($event)" @cancel="closeChong()"></u-picker>
		<u-picker :show="showType" :columns="yueTypeList" :title="'选择充值月份'"  @confirm="chooseType($event)" @cancel="closeType()"></u-picker>
<!--		<u-picker :show="showClass" :columns="courseList" :title="'选择月卡课程'"  key-name="name" @confirm="chooseClass($event)" @cancel="closeClass()"></u-picker>-->
		<shopro-g-picker v-if="showClass" :title="'选择月卡课程'" :show="showClass" :columns="courseList"  @confirm="chooseClass" @close="closeClass"></shopro-g-picker>
    <u-datetime-picker
        v-model="value1"
        :show="showBeginTime"
        mode="date"
        title="选择开始时间"
        @cancel="closeBeginTime"
        @confirm="chooseBeginTime"
    ></u-datetime-picker>
    <u-datetime-picker
        v-model="value2"
        :show="showEndTime"
        mode="date"
        title="选择结束时间"
        @cancel="closeEndTime"
        @confirm="chooseEndTime"
    ></u-datetime-picker>
<!--		<u-datetime-picker-->
<!--			:show="showType"-->
<!--			v-model="form.card_daychou"-->
<!--			mode="year-month"-->
<!--			@confirm="chooseType($event)"-->
<!--			@cancel="closeType()"-->
<!--		></u-datetime-picker>-->
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			scoreAll:'',
			showType:false,
			showClass:false,
			showTimeType:false,
      showBeginTime : false,
      showEndTime   : false,
      value1        : Number(new Date()),
      value2        : Number(new Date()),
			form: {
				phone: '',
				score:'',
				fixed_score:'',
				yueka:'',
				yueType:'',
				type:'',
				chongName:'',
				card_daychou:Number(new Date()),
				card_day:'',
				course_id:'',
				course_name:'',
        str_time  : '',
        end_time    : '',
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				type: [
					{
						required: true,
						message: '请选择充值类型',
						trigger: ['blur', 'change']
					}
				],
			},
			rechargeImages:[],
			columns: [
				['中国', '美国', '日本']
			],
			chongClosable:false,
			chongTypeList:[
				[
					{
						name:'积分充值',
						id:'1'
					},
					{
						name:'月卡充值',
						id:'2'
					}
				]
			],
			yueTypeList:[[
				"1",  "2",  "3",  "4",  "5",  "6",  "7",  "8",
				"9", "10", "11", "12", "13", "14", "15", "16",
				"17", "18", "19", "20", "21", "22", "23", "24"
			]],
			courseList:[]
		};
	},
	computed: {
		...mapGetters(['isLogin','userInfo']),
		
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
	},
	onHide() {
	},
	onLoad() {
		this.getCardList();
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
    openBeginTime() {
      this.showBeginTime = true;
    },
    openEndTime() {
      this.showEndTime = true;
    },
    chooseBeginTime(e) {
      this.showBeginTime = false;
      console.log("=== this.showBeginTime = false;", e)
      this.beginTime      = e.value;
      this.form.str_time = this.formatTimestamp(this.beginTime);
    },
    closeBeginTime() {
      this.showBeginTime = false;
    },
    chooseEndTime(e) {
      this.showEndTime = false;
      console.log("=== this.showBeginTime = false;", e)
      this.endTime      = e.value;
      this.form.end_time = this.formatTimestamp(this.endTime);
    },
    closeEndTime() {
      this.showEndTime = false;
    },
    formatTimestamp(timestamp) {
      const date    = new Date(timestamp);
      const year    = String(date.getFullYear());
      const month   = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且保证两位数
      const day     = String(date.getDate()).padStart(2, '0'); // 保证两位数
      return `${year}-${month}-${day}`;
    },
		chooseChong(e){
			this.chongClosable = false;
			this.form.type = e.value[0].id
			this.form.chongName = e.value[0].name
		},
		closeChong(){
			this.chongClosable = false;
		},
		chooseType(e){
			console.log("====e",e)
			this.showType = false;
			this.form.card_daychou = e.value[0];
			this.form.card_day = e.value[0];
		},
		chooseYouxiao(e){
			console.log("-close事件:", e);
		},
		closeType(){
			this.showType = false;
		},
		chooseClass(selected, values, labels) {
			console.log('已选择：', selected, values, labels);
			this.showClass = false;
			let idArray = [];
			let nameArray = [];
			selected.forEach(item=>{
				idArray.push(item.id)
				nameArray.push(item.name)
			})
			this.form.course_id = idArray.join(',')
			this.form.course_name = nameArray.join(',')
      console.log("===this.form.course_id",this.form.course_id)
		},
		closeClass(){
			this.showClass = false;
		},
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		submit() {
			let imageArr = [];
			if(this.rechargeImages.length>0){
				this.rechargeImages.forEach(item=>{
					imageArr.push(item.url)
				})
			}
			this.$refs.uForm.validate().then(res => {
				let fromData = {
					...this.form,
					image:imageArr.join(',')
				}
				this.$Api.merchant.rechargeAdd(fromData).then(res=>{
					uni.$u.toast(res.msg)
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},500)
					}
				}).catch(err=>{
					console.log(e)
				})
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		// 删除图片
		deletePic(event) {
			this[`recharge${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`recharge${event.name}`].length
			for (let i = 0; i < lists.length; i++) {
				const result = await this.$uploadFilePromise(lists[i].url)
				this[`recharge${event.name}`].splice(fileListLen, 1, {
					status: 'success',
					message: '',
					url: result.fullurl
				})
				fileListLen++
			}
		},
		sexSelect(){
		
		},
		openYueType(){
			this.showType = true;
			console.log("====this.showType",this.showType)
		},
		openChongType(){
			this.chongClosable = true;
		},
		openClass(){
			this.showClass = true;
			debugger;
			if(this.form.course_id){
				let idarray = this.form.course_id.split(',');
				this.courseList.map((item,index)=>{
					if(idarray.includes(item.id.toString())){
						item._check = true
					}
				})
				console.log("===this.courseList",this.courseList)
			}
		},
		openYouxiaoqi(){
		
		},
		getCardList(){
			var that = this;
			that.courseList = [];
			that.$Api.merchant.allcourseList().then(res=>{
				that.courseList = that.courseList.concat(res.data);
			})
		},
		getScore(){
			var that = this;
			that.scoreAll = '';
			that.$Api.merchant.rechargeScore().then(res=>{
				that.scoreAll = res.data;
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
	position: relative;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.content-box{
	background: #FFFFFF;
	border-radius: 30rpx;
	min-height: 80vh;
	width: calc( 100% - 76rpx );
	position: absolute;
	top: 180rpx;
	z-index: 20;
	.pay-item{
		width: 25%;
	}
}
::v-deep .u-form{
	width: 100%;
}
.images-content{
	width: 100%;
	height: 300rpx;
	display: flex;
	border:1rpx solid #eee;
}
.merchant-title {
	position: absolute;
	top: 190rpx;
	width: calc( 100% - 76rpx );
	height: 54px;
	background: #C9EFD0;
	border-radius: 18px 18px 0px 0px;
	.merchant-main-title {
		color: #30AA4D;
		text-align: center;
	}
	
	.merchant-sub-title {
		color: #30AA4D;
		.merchant-sub-title-btn{
			color: #30AA4D;
		}
	}
}
.submit-btn{
	margin-top: 20rpx;
	width: 100%;
	height: 84rpx;
	background: linear-gradient( #30AA4D 0%, #20CE83 100%);
	box-shadow: 0px 2px 4px 0px rgba(48,170,77,0.1);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28rpx;
}
</style>
